<template>
    <div>
        <Banner :bannerImg='bannerImg' :title='title' :gallaryImg='gallaryImg'></Banner>
        <Header></Header>
        <div class="content">
            <List :detailList="detailList"></List>
        </div>
    </div>
</template>

<script>
import Banner from '@/components/detail/banner.vue'
import Header from '@/components/detail/header.vue'
import List from '@/components/detail/list.vue'
    export default {
        name:'Detail',
        data() {
            return {
                title:'',
                bannerImg:'',
                gallaryImg:[],
                detailList:[]
            }
        },
        created() {
            this.getDetailInfo()
        },
        methods: {
            getDetailInfo(){
                this.$http('detail.json?id=',{
                    params:{id:this.$route.params.id}
                })
                .then(res=>{
                    res=res.data
                    console.log(res)
                    if(res.ret && res.data){
                        this.title=res.data.sightName
                        this.bannerImg=res.data.bannerImg
                        this.gallaryImg=res.data.gallaryImgs
                        this.detailList=res.data.categoryList
                    }
                })
                .catch(err=>err)
            }
        },
        components:{
            Banner,
            Header,
            List
        }
    }
</script>

<style lang="stylus" scoped>
    .content
        height 50rem
</style>